<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jquery手风琴轮播</title>
  <link rel="stylesheet" href="./index.css">
</head>

<body>
  <div id="wrapper">
    <div class="pic_box box1">
      <div class="icon none">01</div>
    </div>
    <div class="pic_box box2">
      <div class="icon">02</div>
    </div>
    <div class="pic_box box3">
      <div class="icon">03</div>
    </div>
    <div class="pic_box box4">
      <div class="icon">04</div>
    </div>
    <div class="pic_box box5">
      <div class="icon">05</div>
    </div>
    <div class="pic_box box6">
      <div class="icon">06</div>
    </div>
  </div>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
  <script>
    $(document).ready(function () {
      var oWrapper = $('#wrapper');
      var imgBox = $('.pic_box');
      // 图片间隙
      var distance = 90;
      // 定时器key
      var timer = null;
      // 当前现实的图片索引
      var imgIndex = 0;
      // 鼠标移入的图片索引
      var mouseIndex = 0;
      // 轮播函数
      function mouseSlide() {
        if (mouseIndex > imgIndex) {
          for (var i = imgIndex + 1; i <= mouseIndex; i++) {
            imgBox.eq(i).stop().animate({ left: i * distance + 'px' }, 600);
          }
          imgIndex = mouseIndex;
        } else {
          for (var i = imgIndex; i > mouseIndex; i--) {
            imgBox.eq(i).stop().animate({ left: (i - 1) * distance + 680 }, 600);
          }
          imgIndex = mouseIndex;
        }
        imgBox.eq(imgIndex).children().addClass('none');
        imgBox.eq(imgIndex).siblings().children().removeClass('none');
      }

      // 自动轮播
      function autoSlide() {
        if (mouseIndex === imgBox.length - 1) {
          mouseIndex = 0
        } else {
          mouseIndex++
        }
        mouseSlide();
      }

      timer = setInterval(function () {
        autoSlide()
      }, 3000);

      imgBox.hover(function () {
        clearInterval(timer);
        mouseIndex = $(this).index();
        mouseSlide()
      }, function () {
        timer = setInterval(function () {
          autoSlide()
        }, 3000);
      });
    });
  </script>
</body>

</html>